
<template>
    <view 
        class="tabs"
    >
        <scroll-view class="active-switch" scroll-x :scroll-into-view="id" scroll-with-animation>
            <view class="switch-container" >
                <view 
                v-for="(item,index) in TabList" :key="index"
                :class="['active-item',currentTab==index&&'focus',TabList.length==3&&'fix']"
                @tap="tabChange(index)"
                :id='`tab_${index}`'
                >
                    <view class="item">{{item.name}}</view>
                </view>
                <view class="focus-line"
                    :class="[TabList.length==3&&'fix']"
                    :style="{transform:transformX}"
                >
				<view class="line-item">
					
				</view>
                </view>
            </view>
        </scroll-view>
        <view class="tab-pane-view"
            @touchstart='touchstart'
            @touchend='touchend'
        >
            <view 
              class="tab-pane-group"
              :style="{transform:transformXx}"  
            >
            <slot></slot>
            </view>
        </view>
    </view>    
</template>
<script>
export default {
    name:'Tabs',
    data(){
        return {
            id:'tab_0',
            start:0
        }
    },
    props:{
        TabList:{
            default:()=>{
                return []
            },
            type:Array
        },
        currentTab:{
            default:0,
            type:Number
        }
    },
    computed:{
        transformX(){
            let currentTab = this.currentTab;
            return `translate3d(${currentTab*100}%, 0px, 0px)`
        },
        transformXx(){
            let currentTab = this.currentTab;
            return `translate3d(-${currentTab*100}%, 0px, 0px)`
        }
    },
    methods:{
        tabChange(index){
            if(this.currentTab!=index){
                this.$emit('tabs',index);
                // this.bus.$emit('tabs',index)  //事件，这里触发tabs事件
                this.id = `tab_${index}`
            }
        },
        touchstart(e){
            this.start = e.touches[0].clientX;
        },
        touchend(e){
            let end = e.changedTouches[0].clientX;
            if(end-this.start>10&&this.currentTab>=1){
                this.tabChange(this.currentTab-1)
            }else if(this.start-end>10&&this.currentTab<this.TabList.length-1){
                this.tabChange(this.currentTab+1)
            }
        }
    }
}
</script>
<style>
	.tabs {
		width: 100%;
		 position: relative;
		 height: 100vh;
		 display: flex;
		 flex-direction: column;
	}
	 .tabs .active-switch {
		 overflow: scroll;
	}
	 .tabs .active-switch .switch-container {
		 position: relative;
		 display: flex;
		 flex-direction: row;
	}
	 .tabs .active-switch .switch-container .focus-line {
		 flex: 1;
		 width: 160upx;
		 position: absolute;
		 bottom: 0;
		 /* border-bottom: 4upx solid #fff; */
		 transition: 0.3s;
	}
	.tabs .active-switch .switch-container .focus-line .line-item{
		width: 40%;
		border-bottom: 4upx solid #1AA034;
		margin: 0 auto;
	}
	 .tabs .active-switch .switch-container .focus-line.fix {
		 width: 250upx;
	}
	 .tabs .active-switch .active-item {
		 position: relative;
		 min-width: 160upx;
		 width: 160upx;
		 flex: 1;
		 height: 100upx;
		 transition: 0.3s;
		 background-color: #fff;
		 color: #333;
		 text-align: center;
		 display: flex;
		 flex-direction: column;
		 justify-content: space-around;
		 /* border-bottom: 1upx solid rgba(0,0,0,0.5); */
	}
	 .tabs .active-switch .active-item.focus {
		 background: #fff;
		 color: #1AA034;
		 transition-duration: 0.3s;
	}
	 .tabs .active-switch .active-item.fix {
		 width: 250upx;
	}
	 .tabs .active-switch .active-item .item {
		 padding: 0 5upx;
		 overflow: hidden;
		 font-size: 28upx;
	}
	 .tabs .tab-pane-view {
		 overflow: hidden;
		 background-color: #fff;
		 flex: 1;
	}
	 .tabs .tab-pane-view .tab-pane-group {
		display: block;
		 white-space: nowrap;
		 -webkit-transition: all 0.3s;
		 transition: all 0.3s;
		 width: 100%;
		 overflow: visible;
		 will-change: transform, left, top;
		 min-height: 100upx;
		 height: 100%;
	}
	.tabs .tab-pane-view .tab-pane-group .tab-pane-item {
		 width: 100%;
		 min-height:100upx;
		 display: inline-block;
		 white-space: initial;
		 vertical-align: top;
		 font-size: 24upx;
		 box-sizing: border-box;
		 overflow: auto;
	}


</style>